<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"  isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
    <!--bootstrap库-->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap/bootstrap.min.js"></script>
	<!-- sweetAlert -->
	<link href="css/bootstrap.sweetalert/sweet-alert.css" rel="stylesheet" />
    <script src="js/sweet-alert.min.js"></script>
	<script src="js/cart/common.js"></script>
	
	



<script src="js/cart/jquery.fly.min.js"></script> 
<script src="js/cart/cart.js"></script>
<script src="js/cart/showFood.js"></script>
 <!--font-awesome字体库-->
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/font-awesome.css" rel="stylesheet" />
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <!--平滑滚动到顶部库-->
    <script src="js/scrolltopcontrol.js" type="text/javascript"></script>
    <!--jquery.hammer手势插件-->
    <script src="js/jquery.hammer/hammer.min.js"></script>
    <script src="js/jquery.hammer/jquery.hammer.js"></script>
    <!--主要写的jquery拓展方法-->
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <!--主要写的css代码-->
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/rightbar.css" rel="stylesheet" type="text/css" />
    <!--主要写的js代码-->
     <!--<script src="js/cart/default.js" type="text/javascript"></script>  --> 
     <script src="js/cart/rightbar.js" type="text/javascript"></script>
	
	
	
	<link href="css/cart.css" rel="stylesheet" />
	<meta charset="UTF-8">
	<title>${merchant.mname } 的店铺</title>
    <style type="text/css">
        #di{
            width:400px;
            height:500px;
            overflow: scroll;
            position:absolute;
             top:80px;
             right:-500px;
            display:none;
            
        }
        
        #showbt{
             position:absolute;
             top:80px;
             right:0px;
        }
        .table th, .table td {
        	font-size:20px; 
            text-align: center;
            vertical-align: middle!important;
        }
       
       img{
         width:160px;
         height:160px;
       }
       li{
       	list-style:none;
       }
       body{
              padding-top: 50px;
              padding-bottom: 50px;
          	  background-color:white;
          }
          
          #summary-container .col-md-4{
              margin-top: 20px;
         
              text-align:center;
          }
          hr.divider{
            margin-top:300px
            margin: 40px 0;  
          }
          .feature{
              padding:40px 0;
          }
          #page{
              margin:0 auto;
          }
          
          
          #cloneDiv{
          	display:none;
          }
    </style>
</head>
<body>


      <!-- 导航栏 -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
            
                <button type="button" class="navbar-toggle show pull-left" data-target="sidebar">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
         
                
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="showMerchants">CSystem</a>
                
            </div>
            <div id="navbar" class="collapse navbar-collapse" >            
                <ul class="nav navbar-nav">
                    <li><a href="showMerchants" style="color:white">首页</a></li>
              	</ul>
              	
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="请输入菜名" id="findText">
                    </div>
                </form>
                
                
                
                
              <ul class="nav navbar-nav navbar-right">
                	<c:if test="${sessionScope.cid!=null}"> 
	                    <li class="dropdown">
	                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
	                           aria-expanded="false"><i class="fa fa-user fa-fw"></i>&nbsp;${sessionScope.cname }&nbsp;<span class="caret"></span></a>
	                        <ul class="dropdown-menu" role="menu">
	                            <li><a href="toorderlist">订单列表</a></li>
                                <li><a href="toaddress">配送地址管理</a></li>
                                <li><a href="tologout">退出登录</a></li>
	                        </ul>
	                    </li>
                   </c:if> 
                    <c:if test="${sessionScope.cid==null}">
                    	<ul class="nav navbar-nav">
		                    <li><a href="login.jsp">登录</a></li>
		                    <li><a href="register.jsp">注册</a></li>
		                </ul>
                    </c:if>
                </ul>
                <button type="button" class="navbar-toggle show pull-right" data-target="rightsidebar">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </nav>


   <div class="container-fluid all">
         <div class="sidebar" style="background-color:white">
            <div>
                <h3 align="center" id="merchantFlag" icnum="${merchant.icnum }">商家信息</h3>
                <div>
                    <h3 align="center">${merchant.mname }</h3>
                    <p><img width="300px" height="300px" alt="${merchant.mname}" src="${merchant.portrait }" align="center"></p>
                    <p><span style="margin-left:5px">客户评分:</span>${levelString }</p>
                </div>
            </div>
            <ul class="nav" style="margin-top:20px">
            	<li><a href="javascript:void(0);" id="commontTag" icnum="${merchant.icnum }">客户评价列表</a></li>
                <li class="has-sub">
                    <a href="javascript:void(0);"><span style="align-content: center">菜品种类</span><i class="fa fa-caret-right fa-fw pull-right"></i></a>
                    <ul class="sub-menu">
                        <li type="1" fid="${foods[0].fid}" icnum=${merchant.icnum }><a href="javascript:void(0)" id="soil"><i class="fa fa-circle-o fa-fw"></i>&nbsp;酒水</a></li>
                        <li type="2" fid="${foods[0].fid}" icnum=${merchant.icnum }><a href="javascript:void(0)"><i class="fa fa-circle-o fa-fw" ></i>&nbsp;主食</a></li>
                        <li type="3" fid="${foods[0].fid}" icnum=${merchant.icnum }><a href="javascript:void(0)"><i class="fa fa-circle-o fa-fw"></i>&nbsp;小吃</a></li>
                        <li type="4" fid="${foods[0].fid}" icnum=${merchant.icnum }><a href="javascript:void(0)"><i class="fa fa-circle-o fa-fw"></i>&nbsp;套餐</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="rightsidebar">
            <div>
                <h3 align="center">购物车</h3>
 					<div id="cart">
        <div id="cart_top">
        购物车
        
        </div>
        
        <div id="cart_body">
            
            <!--此部分被隐藏，用来clone -->
                <li id="pro_sample"> 
                    <p>
                        <span class="pro_name">可以被替换名字</span> <img src="images/del.png" id="delImage" class="delImage" style="width:17px;height:17px;margin-bottom: 10px">
                    </p>
                  	<p><span>单价</span><span style="margin-left:105px" id="unit_price">0</span></p>
                    <p>
                    	<span>
	                        <button id="minusId" class="btn btn-default btn-xs minus">-</button>
	                        <input id="countId" type="text" style="font-size:10px;line-height:1em;width:20px;" class="text-center" value="1">
	                        <button id="plusId" class="btn btn-default btn-xs plus">+</button>
                        </span>
                        <span class="cart_pro_price" id="subtotal">0</span>
                    </p>
                </li>
                
                
                <!--给下面克隆的 -->
                		<table id="rowCLone" style="display:none">
	                		<tr id="rowTpl">
								<th class="comentUserTpl">用户</th>
								<th class="commentTpl">评论内容</th>
								<th class="commentRatingsTpl">评分</th>
								<th class="commentTimeTpl">评论时间</th>
								<th class="commentRplInfoTpl">商家回复信息</th>
								<th class="comentRplTimeTpl">商家回复时间</th>
							</tr>
						</table>
             	<!-- 此部分被隐藏，用来克隆评论列表 -->
            	<table border=1 id="commentTemplate" class="table table-bordered" style="width: 30%; margin: 0 auto; display:none">
					<thead id="thead">
						<th>用户</th>
						<th>评论内容</th>
						<th>评分</th>
						<th>评论时间</th>
						<th>商家回复信息</th>
						<th>商家回复时间</th>
					</thead>
					<tbody id="comentBodyTpl">
					</tbody>
				</table>
				
            <ul>
                
            </ul>
        </div>
        <div id="cart_settlement">
            <p>合计：<span id="priceTotal" class="priceTotal">0</span></p>
            <button id="settlementId" href="toOrderPage?icnum=${merchant.icnum }"><img src="images/jiesuan.gif" style="height:35px;width:190px;margin-top:0px;margin-left:-7px" class="center-block clear"></button>
        </div>
    </div>
            </div>
            
        </div>
        <div class="maincontent row">
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="margin-top: 50px;width: 70%">
              	<!-- 克隆模板 -->
              	<div class="col-md-4" id="foodTemplate" style="display:none">
					<li><img class="img-circle imageTemplate" src="x" /></li> 
	                <li class="fnameTemplate" style="margin-left:50px">菜品名 </li>
	                <li class="fpriceTemplate" style="margin-left:50px">价格</li>
	                <li><button style="margin-left:50px" class="order btn btn-success orderTemplate" icnum="xx" fid = "xxx">订购</button></li>
				</div>
              	
              	
              	
              <div class="row" id="foodDiv">
              		<c:forEach items="${foods}" var="food">
	                   <div class="col-md-4 model">
	                   			 
								<li><img class="img-circle" src="${food.fimg }" /></li>
				                <li style="margin-left:50px">${food.fname } </li>
				                <li style="margin-left:50px">${food.fprice }</li>
				                <li><button style="margin-left:50px" class="order btn btn-success"  fid = "${food.fid }">订购</button></li>
				       </div>
			       </c:forEach>

              </div>
              
              
            </div>
            
        </div>
    </div>
    <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a>
   <!-- <hr class="divider" style="padding-bottom: 50px " role="separator"> -->  

    <button id="showbt" class="CartBar glyphicon glyphicon-shopping-cart"></button>
	<div class="CartBar" id="di">
         <button id="hidebt" class="glyphicon glyphicon-forward"></button>
        <div class="row">
		     <div class="col-md-12 col-lg-12 col-sm-12" >
		         <div style="border-top:1px solid gray;padding:4px 10px;">
		             <div style="margin-left:20px;" class="pull-right total">
		                <label>金额合计:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
		                 <div id="accounts">
		                <span class="clear delete btn btn-xs btn-primary" style="float:right" id="settlement">结算</span>
		             </div>
		             </div>
		             <div class="pull-right">
		                <label>您选择了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>种产品型号，共计<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
		                 
		             </div>
		             
		             <div class="pull-right selected" id="selected">
		                <span id="selectedTotal"></span>
		             </div>
		         </div>
		     </div>
 		</div>  
    </div>
</body>
        
        
        
 
</html>